<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">


<!-- base href="http://www.clanccc.co.uk.wstub.archive.org/moo/sortlist.html" -->

	<title>Mootools - Sortable nested lists</title>
	<script src="sortlist_files/urchin.js" type="text/javascript"></script>
	<script type="text/javascript">
		_uacct = "UA-737010-1";
		urchinTracker();
	</script>	
	<script type="text/javascript" src="sortlist_files/mootools.js"></script>
	<style type="text/css">
		* {margin:0; padding:0;}
		html {font-size:62.5%; font-family:verdana;}
		h1 {font-size:1.6em;}
		h2 {font-size:1.5em;}
		h3 {font-size:1.4em;}
		h4 {font-size:1.3em;}
		h5 {font-size:1.2em;}
		h6 {font-size:1.1em;}
		input {font-size:1em;}
		pre {overflow:auto; height: 100px; width:90%; background-color:#eee; border:1px solid black;}
		ol {cursor:pointer; background-color:#fff;}
		li {margin-left:3em;}
		.drag {background-color:#ccc;}
		.nCollapse {background-color:#ddd; color:red;}
		.unlocked {background-color:#cfc;}
	</style>
	<script type="text/javascript" src="sortlist_files/nested.js"></script>
	<script type="text/javascript">
		//<![CDATA[
		var DumpIt = function() {
			var theDump = sortIt.serialize();
			$('debug').setHTML(Json.toString(theDump));
		};
		
		var InsertIt = function() {
			var li = new Element('li').setProperty('id', $('id').value).appendText($('text').value).injectInside($('example'));
		};
		
		var LockIt = function() {
			sortIt.options.lock = ($('locking').value.length == 0) ? null : $('locking').value;
		};
		
		var sortIt;
		window.onDomReady(function() {
			sortIt = new Nested('example', {
				collapse: true,
				onStart: function(el) {
					el.addClass('drag');
				},
				onComplete: function(el) {
					el.removeClass('drag');
				}
			});
			$('locking').addEvent('change', LockIt);
			$('insert').addEvent('click', InsertIt);
			$('dump').addEvent('click', DumpIt);
		});
		//]]>
	</script>
</head><body>
	<h1>Nested Sortable Lists</h1>
	Mootools (using <a href="http://web.archive.org/web/20070323174527/http://mootools.net/build/index.php">the v1 development</a>) nested sortable lists<br><br>
	If you use this script/code whatever, some credit to myself, CrazyDave, and this URL would be nice :)
	<h2>Download</h2>
	<p>Latest version: 1.20 (2007-01-25)</p>
	<p>Last changes:
		</p><ul>
			<li>New option... handleClass! \o/ Just add the a class to whatever you want to be a handle.</li>
		</ul>
	
	<a href="http://web.archive.org/web/20070323174527/http://www.clanccc.co.uk/moo/js/nested.js">Source</a><br>
	<a href="http://web.archive.org/web/20070323174527/http://www.clanccc.co.uk/moo/js/nested.comp.js">Source compressed</a><br>
	<a href="http://web.archive.org/web/20070323174527/http://forum.mootools.net/topic.php?id=1106">Related Mootools forum post</a><br>
	<h2>Parameters</h2>
	<ul>
		<li>childTag: 'LI' // HTML Tag that's used for child elements</li>
		<li>childStep: 30 // Number of pixels to the right of an element to turn it into a child of its sibling.
		</li><li>handleClass: null // null = No handles, pass it the name of a class and they'll become handles</li>
		<li>ghost: true|false // Creates a ghost of the dragged item</li>
		<li>onStart: function // Provide a function to execute when dragging starts</li>
		<li>onComplete: function // Provide a function to execute when dragging finishes</li>
		<li>collapse: false|true // default false, if true items with child elements can be collapsed</li>
		<li>collapseClass: 'nCollapse' // Class added to an item that has been collapsed</li>
		<li>expandKey: 'shift'|'control' // Key used to expand collapsed items when dragged over</li>
		<li>lock: null|'parent'|'depth'|'class' // Sorting restrictions</li>
		<li>lockClass: 'unlocked' // If "lock"="class" only items with this class can be moved</li>
	</ul>
	<h2>Features</h2>
	<ul>
		<li>Ghosting :) just like the normal sortables of mootools</li>
		<li>Handles, just add a class to the handles and tell Nested about it.  Otherwise the whole item is draggable.</li>
		<li>Movements
			<ul>
				<li>Drag an item, up or down, to reposition its order in the nested lists</li>
				<li>Drag an item, left or right, to reposition it as a child/sibling</li>
				<li>When you drag a parent, you drag its kids along with it</li>
				<li>Can move an item to become a child of an item that currently has no children</li>
				<li>If an item is moved and this leaves its former parent without a child, the parent has it's child container removed</li>
			</ul>
		</li>
		<li>Serializable, returns an array containing objects of ID's and children arrays</li>
		<li>onStart and onComplete supported</li>
		<li>Can detach from the list when you want to disable sorting.</li>
		<li>Drag will still continue if the mouse leaves the window, unclicks and then returns</li>
		<li>If the above point occurs, a mouse click will release the drag</li>
		<li>Collapsible
			<ul>
				<li>Click an item with children and it'll collapse, hiding the children</li>
				<li>Collapsed items gain an extra class for displaying their status</li>
				<li>Collapsed items don't expand when dragged or dragged over</li>
				<li>Collapsed items will expand if dragged over and shift is held on the keyboard</li>
			</ul>
		</li>
		<li>Dynamic
			<ul>
				<li>You can insert new items in the nested lists and they'll work with this script automatically</li>
				<li>Removing items from the list shouldn't case any problems</li>
			</ul>
		</li>
		<li>Locking<ul>
			<li>Lock sorting to only within the dragged items current parent</li>
			<li>Lock sorting to only those items that have the same depth in the lists</li>
			<li>Lock sorting to only items with a certain class</li>
			</ul>
		</li>
		<li>Workaround for text selecting while being dragged in IE.</li>
		<li>List items can contain additional HTML+text.</li>
		<li>List items of different sizes shouldn't cause any problems anymore ;)</li>
	</ul>
	<h2>Example</h2>
	<p>I've added some extra HTML to a few list items, just to help show/test that everything still works.</p>
	<label for="locking">Sorting restriction: <select name="locking" id="locking">
		<option value="">None</option>
		<option value="parent">Same parent only</option>
		<option value="depth">Same depth only</option>
		<option value="class" style="background-color: rgb(204, 255, 204);">Only move items with the class "unlocked"</option>
	</select></label><br>
	<ol id="example">
		<li id="item1">Item 1</li>
		<li id="item2">Item 2</li>
		<li id="item3">Item 3
			<ol>
				<li id="item3-1"><img alt="script" src="sortlist_files/script.png" class="handle" width="16" height="16"> This item has a handle :)</li>
				<li id="item3-2">Item 3.2</li>
				<li id="item3-3">Item 3.3
					<ol>
						<li id="item3-3-1">Item 3.3.1<br>
							A little extra text to make things different.
						</li>
						<li id="item3-3-2">Item 3.3.2</li>
						<li id="item3-3-3">Item 3.3.3
							<ol>
								<li id="item3-3-3-1">Item 3.3.3.1</li>
							</ol>
						</li>
					</ol>
				</li>
			</ol>
		</li>
		<li id="item4">Item 4</li>
		<li id="item5" class="unlocked">Item 5
			<ol>
				<li id="item5-1">Item 5.1</li>
				<li id="item5-2">Item 5.2</li>
				<li id="item5-3"><h3>Item 5.3</h3></li>
			</ol>
		</li>
		<li id="item16"><strong>Item 6</strong></li>
		<li id="item17">Item 7</li>
		<li id="item18">Item 8</li>
		<li id="item19"><em>Item 9</em></li>
		<li id="item10" class="unlocked">Item 10</li>
		<li id="item11">Item 11</li>
	</ol>
	<hr>
	Looky here, you can dynamically insert a list item and it'll automagically drag about \o/
	<br>
	ID: <input name="id" id="id" value="item12" type="text"><br>
	Text: <input name="text" id="text" value="Item 12" type="text"><br>
	<input name="insert" id="insert" value="Insert a new item" type="button">
	<hr>
	<input name="dump" id="dump" value="Dump" type="button">
	<pre id="debug"></pre>
<!-- SOME SCRIPT SRC'S ON THIS PAGE HAVE BEEN REWRITTEN BY THE WAYBACK MACHINE
OF THE INTERNET ARCHIVE IN ORDER TO PRESERVE THE TEMPORAL INTEGRITY OF THE SESSION. -->


<script language="Javascript">
<!--

// FILE ARCHIVED ON 20070323174527 AND RETRIEVED FROM THE
// INTERNET ARCHIVE ON 20090618121219.
// JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.
// ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
// SECTION 108(a)(3)).

   var sWayBackCGI = "http://web.archive.org/web/20070323174527/";

   function xResolveUrl(url) {
      var image = new Image();
      image.src = url;
      return image.src;
   }
   function xLateUrl(aCollection, sProp) {
      var i = 0;
      for(i = 0; i < aCollection.length; i++) {
         var url = aCollection[i][sProp];         if (typeof(url) == "string") { 
          if (url.indexOf("mailto:") == -1 &&
             url.indexOf("javascript:") == -1
             && url.length > 0) {
            if(url.indexOf("http") != 0) {
                url = xResolveUrl(url);
            }
            url = url.replace('.wstub.archive.org','');
            aCollection[i][sProp] = sWayBackCGI + url;
         }
         }
      }
   }

   xLateUrl(document.getElementsByTagName("IMG"),"src");
   xLateUrl(document.getElementsByTagName("A"),"href");
   xLateUrl(document.getElementsByTagName("AREA"),"href");
   xLateUrl(document.getElementsByTagName("OBJECT"),"codebase");
   xLateUrl(document.getElementsByTagName("OBJECT"),"data");
   xLateUrl(document.getElementsByTagName("APPLET"),"codebase");
   xLateUrl(document.getElementsByTagName("APPLET"),"archive");
   xLateUrl(document.getElementsByTagName("EMBED"),"src");
   xLateUrl(document.getElementsByTagName("BODY"),"background");
   xLateUrl(document.getElementsByTagName("TD"),"background");
   xLateUrl(document.getElementsByTagName("INPUT"),"src");
   var forms = document.getElementsByTagName("FORM");
   if (forms) {
       var j = 0;
       for (j = 0; j < forms.length; j++) {
              f = forms[j];
              if (typeof(f.action)  == "string") {
                 if(typeof(f.method)  == "string") {
                     if(typeof(f.method) != "post") {
                        f.action = sWayBackCGI + f.action;
                     }
                  }
              }
        }
    }


//-->
</script>

</body></html>